Components = {

	getComponents : function() {

		var data = [];

		// Form elements
		data.push(['�������', '����', '���������԰����������Ԫ��', {
							xtype : 'fieldset',
							title : '����',
							autoHeight : true
						}], ['�������', '��Ͽ�', 'һ��������룬Ҳ����ѡ�����Ͽ�', {
							xtype : 'combo',
							fieldLabel : '��ǩ',
							hiddenName : 'cmb_value'
						}], ['�������', '�ı���', 'һ���ı���', {
							xtype : 'textfield',
							fieldLabel : '��ǩ',
							name : 'txt_value'
						}], ['�������', '�����ı���', 'һ��ֻ���������ֵ��ı���', {
							xtype : 'numberfield',
							fieldLabel : '��ǩ',
							name : 'numtxt_value'
						}], ['�������', 'ʱ��ѡ���', 'һ��ֻ��ѡ������ʱ�����Ͽ�', {
							xtype : 'timefield',
							fieldLabel : '��ǩ',
							name : 'tmecmb_value'
						}], ['�������', '����ѡ���', 'һ��ֻ��ѡ���������ڵ���Ͽ�', {
							xtype : 'datefield',
							fieldLabel : '��ǩ',
							name : 'dtecmb_value'
						}], ['�������', '��ѡ��', 'һ���ѡ��', {
							xtype : 'checkbox',
							boxLabel : '��ǩ',
							name : 'chk_value',
							inputValue : 'value'
						}], ['�������', '��ѡ��', 'һ��ѡ��', {
							xtype : 'radio',
							boxLabel : '��ǩ',
							name : 'radio',
							inputValue : 'value'
						}]);

		// Simple Panels
		data.push(['������', '���', 'һ�����Ĭ�ϲ��ֵļ����', {
							xtype : 'panel',
							title : 'Panel'
						}], ['�������,������', '����', '���԰�����������������',
						{
							xtype : 'form',
							title : '����'
						}]);

		// Tab Panel
		data.push(['������', 'ѡ�����', 'һ����Ծ��ж��ѡ������',
				function(add, parent) {
					var w = new Ext.Window({
						width : 586,
						height : 339,
						title : "�½�ѡ�����",
						items : [{
									xtype : "form",
									frame : true,
									items : [{
												layout : "table",
												layoutConfig : {
													columns : 2
												},
												defaults : {
													style : "margin:1px;",
													border : true
												},
												xtype : "fieldset",
												title : "ѡ������",
												autoHeight : true,
												items : [{
															title : "ѡ�����"
														}, {
															title : "�Ƿ񼤻�"
														}, {
															xtype : "textfield",
															name : "title_1",
															width : 200
														}, {
															xtype : "radio",
															fieldLabel : "Label",
															boxLabel : "����Ĭ�ϼ�����",
															name : "active",
															inputValue : 0
														}, {
															xtype : "textfield",
															name : "title_2",
															width : 200
														}, {
															xtype : "radio",
															fieldLabel : "Label",
															boxLabel : "����Ĭ�ϼ�����",
															name : "active",
															inputValue : 1
														}, {
															xtype : "textfield",
															name : "title_3",
															width : 200
														}, {
															xtype : "radio",
															fieldLabel : "Label",
															boxLabel : "����Ĭ�ϼ�����",
															name : "active",
															inputValue : 2
														}, {
															xtype : "textfield",
															name : "title_4",
															width : 200
														}, {
															xtype : "radio",
															fieldLabel : "Label",
															boxLabel : "����Ĭ�ϼ�����",
															name : "active",
															inputValue : 3
														}, {
															xtype : "textfield",
															name : "title_5",
															width : 200
														}, {
															xtype : "radio",
															fieldLabel : "Label",
															boxLabel : "����Ĭ�ϼ�����",
															name : "active",
															inputValue : 4
														}, {
															xtype : "textfield",
															name : "title_6",
															width : 200
														}, {
															xtype : "radio",
															fieldLabel : "Label",
															boxLabel : "����Ĭ�ϼ�����",
															name : "active",
															inputValue : 5
														}]
											}]
								}],
						buttons : [{
							text : 'ȷ��',
							scope : this,
							handler : function() {
								var values = w.items.first().form.getValues();
								w.close();
								var config = {
									xtype : 'tabpanel',
									items : []
								};
								var activeTab = 0;
								Ext.each([1, 2, 3, 4, 5, 6], function(i) {
									if (values['title_' + i]) {
										config.items.push({
													xtype : 'panel',
													title : values['title_' + i]
												});
										if (values.active == i) {
											activeTab = i;
										}
									}
								});
								config.activeTab = activeTab;
								add.call(this, config);
							}
						}, {
							text : 'ȡ��',
							handler : function() {
								w.close();
							}
						}]
					});
					w.show();

				}]);

		// Simples Layouts
		data
				.push(
						['�������', '����Ӧ����',
								'�ò���ֻ����һ�����������Ӧ���������������', {
									layout : 'fit',
									title : '����Ӧ��������'
								}],
						['�������', '��Ƭ����',
								'�ò��ֿ��԰����������һ��ֻ����ʾһ��', {
									layout : 'card',
									title : '��Ƭ��������'
								}],
						[
								'�������',
								'ê������',
								'�ò��ֿ��԰������, ���б������������гߴ綼ʹ��"anchor"�ٷֱ�����',
								{
									layout : 'anchor',
									title : 'ê����������'
								}], ['�������', '��Բ���',
								'�ò��ֿ��԰�����������б����������Ǿ�Զ�λ', {
									layout : 'absolute',
									title : '��Բ�������'
								}]);

		// Accordion Layout
		data.push(['�������', '�۵�����', 'һ��������������۵��Ĳ���',
				function(add, parent) {
					var w = new Ext.Window({
						title : "�½��۵�����",
						width : 619,
						height : 552,
						items : [{
							xtype : "form",
							labelWidth : 120,
							items : [{
								border : false,
								hideLabels : true,
								layout : "form",
								items : [{
									xtype : "checkbox",
									boxLabel : "collapseFirst <span class=\"notice\">True to make sure the ����/չ�� ��ť always renders first (to the left of) any other tools in the contained panels' title bars, false to render it last (defaults to false).</span>",
									name : "collapseFirst"
								}, {
									xtype : "checkbox",
									boxLabel : "autoWidth <span class=\"notice\">True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).</span>",
									name : "autoWidth",
									checked : true
								}, {
									xtype : "checkbox",
									boxLabel : "animate <span class=\"notice\">True to swap the position of each panel as it is expanded so that it becomes the first item in the container, false to keep the panels in the rendered order. This is NOT compatible with \"animate:true\" (defaults to false).</span>",
									name : "animate"
								}, {
									xtype : "checkbox",
									boxLabel : "activeOnTop <span class=\"notice\">True to swap the position of each panel as it is expanded so that it becomes the first item in the container, false to keep the panels in the rendered order. This is NOT compatible with \"animate:true\" (defaults to false).</span>",
									name : "activeOnTop"
								}, {
									xtype : "checkbox",
									boxLabel : "fill <span class=\"notice\">True to adjust the active item's height to fill the available space in the container, false to use the item's current height, or auto height if not explicitly set (defaults to true).</span>",
									name : "fill",
									checked : true
								}, {
									xtype : "checkbox",
									boxLabel : "hideCollapseTool <span class=\"notice\">True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false). When set to true, titleCollapse should be true also.</span>",
									name : "hideCollapseTool"
								}, {
									xtype : "checkbox",
									boxLabel : "titleCollapse <span class=\"notice\">True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow expand/collapse only when the toggle tool button is clicked (defaults to true). When set to false, hideCollapseTool should be false also.</span>",
									name : "titleCollapse",
									checked : true
								}]
							}, {
								xtype : "textfield",
								fieldLabel : "extraCls",
								name : "extraCls"
							}, {
								xtype : "checkbox",
								boxLabel : "<span class=\"notice\">Add dummy panels to help render layout (useful for debug)</span>",
								name : "adddummy",
								checked : true,
								fieldLabel : "Add dummy panels"
							}]
						}],
						buttons : [{
							text : 'Ok',
							scope : this,
							handler : function() {
								var values = w.items.first().form.getValues();
								w.close();
								var config = {
									layout : 'accordion',
									layoutConfig : {},
									items : []
								};
								config.layoutConfig.activeOnTop = (values.activeOnTop
										? true
										: false);
								config.layoutConfig.animate = (values.animate
										? true
										: false);
								config.layoutConfig.autoWidth = (values.autoWidth
										? true
										: false);
								config.layoutConfig.collapseFirst = (values.collapseFirst
										? true
										: false);
								config.layoutConfig.fill = (values.fill
										? true
										: false);
								config.layoutConfig.hideCollapseTool = (values.hideCollapseTool
										? true
										: false);
								config.layoutConfig.titleCollapse = (values.titleCollapse
										? true
										: false);
								if (values.extraCls) {
									config.layoutConfig.extraCls = values.extraCls;
								}
								if (values.adddummy) {
									config.items.push({
										title : 'Panel 1',
										autoHeight : true,
										html : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.'
									}, {
										title : 'Panel 2',
										autoHeight : true,
										html : 'Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.'
									}, {
										title : 'Panel 3',
										autoHeight : true,
										html : 'Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.'
									}, {
										title : 'Panel 4',
										autoHeight : true,
										html : 'Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.'
									});
								}
								add.call(this, config);
							}
						}, {
							text : 'Cancel',
							handler : function() {
								w.close();
							}
						}]
					});
					w.show();

				}]);

		// Table Layout
		data.push(['Layouts', 'Table Layout', 'Layout as a table',
				function(add, parent) {
					var w = new Ext.Window({
						width : 300,
						height : 300,
						layout : "fit",
						title : "New Table Layout",
						items : [{
							xtype : "form",
							frame : true,
							labelWidth : 120,
							items : [{
								layout : "table",
								layoutConfig : {
									columns : 2
								},
								items : [{
											layout : "form",
											items : [{
														xtype : "numberfield",
														fieldLabel : "Columns x Rows",
														width : 48,
														allowNegative : false,
														allowDecimals : false,
														name : "cols"
													}]
										}, {
											layout : "form",
											labelWidth : 10,
											labelSeparator : " ",
											style : "margin-left:5px",
											items : [{
														xtype : "numberfield",
														fieldLabel : "x",
														width : 48,
														allowNegative : false,
														allowDecimals : false,
														name : "rows"
													}]
										}]
							}, {
								xtype : "textfield",
								fieldLabel : "Cells padding (px)",
								width : 48,
								name : "cellpadding"
							}, {
								xtype : "textfield",
								fieldLabel : "Cells margin (px)",
								width : 48,
								name : "cellmargin"
							}, {
								xtype : "checkbox",
								fieldLabel : "Borders",
								name : "borders",
								checked : true
							}, {
								xtype : "checkbox",
								fieldLabel : "Add some content (useful for debug)",
								name : "addcontent",
								checked : true
							}]
						}],
						buttons : [{
							text : 'Ok',
							scope : this,
							handler : function() {
								var values = w.items.first().form.getValues();
								var cols = parseInt(values.cols, 10);
								var rows = parseInt(values.rows, 10);
								if (isNaN(cols) || isNaN(rows)) {
									Ext.Msg.alert("Error",
											"Columns/Rows are incorrect");
									return;
								}
								w.close();
								var config = {
									layout : 'table',
									layoutConfig : {
										columns : cols
									},
									items : []
								};
								for (var i = 0; i < cols; i++) {
									for (var j = 0; j < rows; j++) {
										config.items.push({
													html : (values.addcontent
															? 'col ' + i
																	+ ', row '
																	+ j
															: null)
												});
									}
								}
								var defaults = {};
								var pad = parseInt(values.cellpadding, 10);
								if (!isNaN(pad)) {
									defaults.bodyStyle = 'padding:' + pad
											+ 'px;';
								}
								var margin = parseInt(values.cellmargin, 10);
								if (!isNaN(margin)) {
									defaults.style = 'margin:' + margin + 'px;';
								}
								if (!values.borders) {
									defaults.border = false;
								}
								if (defaults != {}) {
									config.defaults = defaults;
								}
								add.call(this, config);
							}
						}, {
							text : 'Cancel',
							handler : function() {
								w.close();
							}
						}]
					});
					w.show();

				}]);

		// Column Layout
		data.push(['Layouts', 'Column Layout', 'Layout of columns',
				function(add, parent) {
					var w = new Ext.Window({
						width : 425,
						height : 349,
						layout : "fit",
						title : "New Column Layout",
						items : [{
							xtype : "form",
							frame : true,
							items : [{
										columns : "3",
										layout : "table",
										layoutConfig : {
											columns : 3
										},
										defaults : {
											style : "margin:2px"
										},
										items : [{
													html : "Column"
												}, {
													html : "Size *"
												}, {
													html : "Title **"
												}, {
													xtype : "checkbox",
													name : 'active_1'
												}, {
													xtype : "textfield",
													maskRe : /[0-9%]/,
													width : 53,
													name : 'size_1'
												}, {
													xtype : "textfield",
													name : 'title_1'
												}, {
													xtype : "checkbox",
													name : 'active_2'
												}, {
													xtype : "textfield",
													maskRe : /[0-9.%]/,
													width : 53,
													name : 'size_2'
												}, {
													xtype : "textfield",
													name : 'title_2'
												}, {
													xtype : "checkbox",
													name : 'active_3'
												}, {
													xtype : "textfield",
													maskRe : /[0-9.%]/,
													width : 53,
													name : 'size_3'
												}, {
													xtype : "textfield",
													name : 'title_3'
												}, {
													xtype : "checkbox",
													name : 'active_4'
												}, {
													xtype : "textfield",
													maskRe : /[0-9.%]/,
													width : 53,
													name : 'size_4'
												}, {
													xtype : "textfield",
													name : 'title_4'
												}, {
													xtype : "checkbox",
													name : 'active_5'
												}, {
													xtype : "textfield",
													maskRe : /[0-9.%]/,
													width : 53,
													name : 'size_5'
												}, {
													xtype : "textfield",
													name : 'title_5'
												}, {
													xtype : "checkbox",
													name : 'active_6'
												}, {
													xtype : "textfield",
													maskRe : /[0-9.%]/,
													width : 53,
													name : 'size_6'
												}, {
													xtype : "textfield",
													name : 'title_6'
												}]
									}, {
										html : "* Size : can be a percentage of total width (i.e. 33%),"
												+ "a fixed with (i.e. 120), or empty (autosize)<br/>"
												+ "** Title : not set if empty"
									}]
						}],
						buttons : [{
							text : 'Ok',
							scope : this,
							handler : function() {
								var values = w.items.first().form.getValues();
								w.close();
								var config = {
									layout : 'column',
									items : []
								};
								Ext.each([1, 2, 3, 4, 5, 6], function(r) {
									if (values['active_' + r]) {
										var item = {
											title : values['title_' + r]
													|| null
										};
										var widthVal = values['size_' + r];
										var width = parseInt(widthVal, 10);
										if (!isNaN(width)) {
											if (widthVal[widthVal.length - 1] == '%') {
												item.columnWidth = width / 100;
											} else {
												item.width = width;
											}
										}
										config.items.push(item);
									}
								});
								add.call(this, config);
							}
						}, {
							text : 'Cancel',
							handler : function() {
								w.close();
							}
						}]
					});
					w.show();

				}]);

		// Border layout
		data.push(['Layouts', 'Border Layout', 'Layout with regions',
				function(add, parent) {
					var w = new Ext.Window({
						title : "Border Layout",
						width : 550,
						height : 400,
						layout : 'fit',
						items : [{
							autoScroll : true,
							xtype : "form",
							frame : true,
							defaults : {
								style : "margin:10px"
							},
							items : [{
										xtype : "fieldset",
										title : "Center",
										autoHeight : true,
										items : [{
													xtype : "textfield",
													fieldLabel : "Title",
													name : "title_center",
													width : 299
												}]
									}, {
										xtype : "fieldset",
										title : "Add north region",
										autoHeight : true,
										checkboxToggle : true,
										collapsed : true,
										checkboxName : "active_north",
										items : [{
													xtype : "textfield",
													fieldLabel : "Title",
													name : "title_north",
													width : 299
												}, {
													layout : "table",
													items : [{
														layout : "form",
														items : [{
															xtype : "numberfield",
															fieldLabel : "Height (px)",
															name : "height_north",
															allowDecimals : false,
															allowNegative : false,
															width : 66
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "split_north",
															boxLabel : "Split"
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "collapsible_north",
															boxLabel : "Collapsible"
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "titleCollapse_north",
															boxLabel : "TitleCollapse"
														}]
													}]
												}]
									}, {
										xtype : "fieldset",
										title : "Add south region",
										autoHeight : true,
										checkboxToggle : true,
										collapsed : true,
										checkboxName : "active_south",
										items : [{
													xtype : "textfield",
													fieldLabel : "Title",
													name : "title_south",
													width : 299
												}, {
													layout : "table",
													items : [{
														layout : "form",
														items : [{
															xtype : "numberfield",
															fieldLabel : "Height (px)",
															name : "height_south",
															allowDecimals : false,
															allowNegative : false,
															width : 66
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "split_south",
															boxLabel : "Split"
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "collapsible_south",
															boxLabel : "Collapsible"
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "titleCollapse_south",
															boxLabel : "TitleCollapse"
														}]
													}]
												}]
									}, {
										xtype : "fieldset",
										title : "Add west region",
										autoHeight : true,
										checkboxToggle : true,
										collapsed : true,
										checkboxName : "active_west",
										items : [{
													xtype : "textfield",
													fieldLabel : "Title",
													name : "title_west",
													width : 299
												}, {
													layout : "table",
													items : [{
														layout : "form",
														items : [{
															xtype : "numberfield",
															fieldLabel : "Width (px)",
															name : "width_west",
															allowDecimals : false,
															allowNegative : false,
															width : 66
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "split_west",
															boxLabel : "Split"
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "collapsible_west",
															boxLabel : "Collapsible"
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "titleCollapse_west",
															boxLabel : "TitleCollapse"
														}]
													}]
												}]
									}, {
										xtype : "fieldset",
										title : "Add east region",
										autoHeight : true,
										checkboxToggle : true,
										collapsed : true,
										checkboxName : "active_east",
										items : [{
													xtype : "textfield",
													fieldLabel : "Title",
													name : "title_east",
													width : 299
												}, {
													layout : "table",
													items : [{
														layout : "form",
														items : [{
															xtype : "numberfield",
															fieldLabel : "Width (px)",
															name : "width_east",
															allowDecimals : false,
															allowNegative : false,
															width : 66
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "split_east",
															boxLabel : "Split"
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "collapsible_east",
															boxLabel : "Collapsible"
														}]
													}, {
														layout : "form",
														hideLabels : true,
														style : "margin-left:10px",
														items : [{
															xtype : "checkbox",
															name : "titleCollapse_east",
															boxLabel : "TitleCollapse"
														}]
													}]
												}]
									}],
							buttons : [{
								text : 'Ok',
								scope : this,
								handler : function() {
									var values = w.items.first().form
											.getValues();
									w.close();
									var config = {
										layout : 'border',
										items : []
									};
									config.items.push({
												region : 'center',
												title : values.title_center
														|| null
											});
									Ext.each(
											['north', 'south', 'west', 'east'],
											function(r) {
												if (values['active_' + r]) {
													config.items.push({
														region : r,
														title : values['title_'
																+ r]
																|| null,
														width : parseInt(
																values['width_'
																		+ r],
																10)
																|| null,
														height : parseInt(
																values['height_'
																		+ r],
																10)
																|| null,
														split : (values['split_'
																+ r]
																? true
																: null),
														collapsible : (values['collapsible_'
																+ r]
																? true
																: null),
														titleCollapse : (values['titleCollapse_'
																+ r]
																? true
																: null)
													});
												}
											});
									if (parent) {
										parent.layout = 'fit';
									}
									add.call(this, config);
								}
							}, {
								text : 'Cancel',
								handler : function() {
									w.close();
								}
							}]
						}]
					});
					w.show();
				}]);

		return data;

	}
};
